<template>
  <div>
    <div class="bg-white p-1 mx-1" :style="{paddingBottom:'2rem'}">
      <template v-if="params.active === '隐患台账'">
        <custom-title :is-line="true" title="隐患信息" />
        <div class="desc-container-1">
          <div v-for="(item, index) in descList" :key="index + 'base'">
            <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''" class="AccidentEventsDetail">
              <template #valueSlot>
                <div v-if="item.label !== '隐患图片'" class="desContent">{{ item.value }}</div>
                <template v-else>
                  <div v-if="Array.isArray(item.value)&&item.value.length>0" class="d-flex flex-wrap">
                    <div v-for="(subItem,subIndex) in item.value" :key="subIndex" :style="{width:'33%'}" class="px-1">
                      <van-image :src="subItem.attachUuid" @click="ImagePreview([subItem['attachUuid']])">
                        <div slot="error" class="font-size-sm text-center text-muted bg-light" />
                      </van-image>
                    </div>
                  </div>
                  <div v-else>
                    暂无图片
                  </div>
                </template>
              </template>
            </custom-details-item>
          </div>
        </div>
        <custom-title :is-line="true" title="处置信息" />
        <custom-timeline-danger :list="timeList" class="custom-timeline-danger-1" />
      </template>
      <template v-if="params.active === '专家排查隐患审核'">
        <custom-title :is-line="true" title="隐患信息" />
        <div class="desc-container-2">
          <div v-for="(item, index) in descList" :key="index + 'base'">
            <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''" class="AccidentEventsDetail">
              <template #valueSlot>
                <div v-if="item.label !== '隐患图片'" class="desContent">{{ item.value }}</div>
                <template v-else>
                  <div v-if="Array.isArray(item.value)&&item.value.length>0" class="d-flex flex-wrap">
                    <div v-for="(subItem,subIndex) in item.value" :key="subIndex" :style="{width:'33%'}" class="px-1">
                      <van-image :src="subItem.attachUuid" @click="ImagePreview([subItem['attachUuid']])">
                        <div slot="error" class="font-size-sm text-center text-muted bg-light" />
                      </van-image>
                    </div>
                  </div>
                  <div v-else>
                    暂无图片
                  </div>
                </template>
              </template>
            </custom-details-item>
          </div>
        </div>
        <custom-title :is-line="true" title="处置信息" />
        <custom-timeline-danger :list="timeList" class="custom-timeline-danger-2" />
      </template>
    </div>
    <div class="bottom-box d-flex justify-content-center align-items-center" :style="{'z-index':3000}">
      <van-button v-if="params.active === '专家排查隐患审核'&&descData.auditResult === '待审核'" plain type="info" size="small" @click="openAuditComponentPopup">审核</van-button>
      <van-button v-if="params.active === '隐患台账'" plain type="info" size="small" @click="openSendComponentPopup">工作提醒</van-button>
    </div>
    <!-- 下发提醒 -->
    <van-popup
      v-model="sendComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">工作提醒</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="background-color: white">
          <sendComponent v-if="sendComponentShow" v-model="sendComponentShow" />
        </div>
      </div>
    </van-popup>
    <!-- 审核 -->
    <van-popup
      v-model="auditComponentShow"
      get-container="body"
      position="right"
      :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      lock-scroll
      safe-area-inset-bottom
      close-on-popstate
      class="custom-van-pop"
    >
      <div class="pop-title">隐患审核</div>
      <div class="pop-vertical-flex">
        <div class="pop-content" style="background-color: white">
          <auditComponent v-if="auditComponentShow" v-model="auditComponentShow" />
        </div>
      </div>
    </van-popup>
  </div>

</template>
<script>
import sendComponent from '../sendComponent.vue'
import auditComponent from '../auditComponent.vue'
import { aQdangersLedgerDetails, aQdangersLedgerDisposal } from '@/api/commonPage/dangerTreatment'
import CustomTimelineDanger from '@/views/staging/commom/dangerTreatment/components/custom-timeline-danger.vue'
import CustomTitle from '@/components/globals/custom-title.vue'
import CustomDetailsItem from '@/components/globals/custom-details-item.vue'
import { ImagePreview } from 'vant'

export default {
  components: {
    CustomDetailsItem,
    CustomTitle,
    CustomTimelineDanger,
    sendComponent,
    auditComponent
  },
  inject: ['layout'],
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      auditComponentShow: false,
      sendComponentShow: false,
      companyListShow: false,
      taskDetailsState: '列表',
      descList: [
        { field: 'companyName', label: '企业名称', icon: '&#xe725;', value: '' },
        { field: 'position', label: '隐患位置', icon: '&#xe87e;', value: '' },
        { field: 'describe', label: '隐患描述', icon: '&#xe692;', value: '' },
        { field: 'checkTime', label: '检查时间', icon: '&#xe685;', value: '' },
        { field: 'dangersLevel', label: '隐患等级', icon: '&#xe696;', value: '' },
        { field: 'dangersType', label: '隐患类别', icon: '&#xe6aa;', value: '' },
        { field: 'checkPerson', label: '检查人员', icon: '&#xe700;', value: '' },
        { field: 'checkBasis', label: '检查依据', icon: '&#xe67a;', value: '' },
        { field: 'checkSource', label: '隐患来源', icon: '&#xe6b7;', value: '' },
        { field: 'dangersPicture', label: '隐患图片', icon: '&#xe603;', value: [] }
      ],
      descData: {},
      timeList: []
    }
  },
  computed: {
    ImagePreview() {
      return ImagePreview
    }

  },
  watch: {
    sendComponentShow(new_) {
      if (!new_) {
        this.basicInfo()
        this.ledgerDisposal()
      }
    }
  },
  mounted() {
    console.log('params', this.params)
    if (this.$route.query.active !== '排查任务管理') {
      this.basicInfo()
      this.ledgerDisposal()
    }
  },
  methods: {
    // 打开下发提醒
    openSendComponentPopup() {
      this.sendComponentShow = true
    },
    // 打开隐患审核
    openAuditComponentPopup() {
      this.auditComponentShow = true
    },
    // 隐患信息
    async basicInfo() {
      this.layout.showAreaLoading([`.desc-container-${this.params.active === '隐患台账' ? 1 : 2}`])
      const { status, data } = await aQdangersLedgerDetails({ dangersLedgerId: this.params.dangersLedgerId })
      if (status === 0 && data) {
        this.descData = data
        if (this.params.active === '隐患台账') { // 如果是隐患台账详情，则描述加上整改期限和整改完成时间两项
          this.descList.splice(this.descList.length - 1, 0, { field: 'deadline', label: '整改期限', icon: '&#xe67a;', value: '' }, { field: 'completeTime', label: '整改完成时间', icon: '&#xe6b7;', value: '' })
        }
        this.descList.forEach(v => {
          v.value = data[v.field] ? (data[v.field]) : '/'
        })
        this.$emit('changeTitle', data)
      }
      this.layout.hideAreaLoading([`.desc-container-${this.params.active === '隐患台账' ? 1 : 2}`])
    },
    // 处置信息
    async ledgerDisposal() {
      this.layout.showAreaLoading([`.custom-timeline-danger-${this.params.active === '隐患台账' ? 1 : 2}`])
      const { status, data } = await aQdangersLedgerDisposal({ dangersLedgerId: this.params.dangersLedgerId })
      if (status === 0 && data) {
        this.timeList = data
      }
      this.layout.hideAreaLoading([`.custom-timeline-danger-${this.params.active === '隐患台账' ? 1 : 2}`])
    }
  }
}
</script>
<style scoped lang="scss">
.bottom-box {
  z-index: 999;
  position: fixed;
  bottom: 1px;
  min-height: 100px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px -8px 8px rgba(0, 0, 0, 0.4);

  .el-button {
    margin: auto;
  }
}

.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  overflow: hidden;

  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;

    .icon-box {
      position: absolute;
      right: .5rem;
      top: 0;

      .iconfont.active {
        color: blue;
      }
    }
  }

  .pop-content {
    // background-color: #fff;
    margin: 0 0.25rem;
    padding: 0rem !important;
  }

  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
</style>

<style>
.bottom-box:empty {
  display: none !important;
}
</style>
